<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XmlHttpRequest查询参数</title>
</head>

<body>
    <input type="text" class="province" value="湖北省">
    <input type="text" class="city" value="武汉市">
    <script>
        const province = document.querySelector('.province').value
        const city = document.querySelector('.city').value

        // 查询参数对象
        const queryObject = {
            pname: province,
            cname: city
        }

        // 查询参数对象 -> 查询参数字符串
        const paramsObject = new URLSearchParams(queryObject)
        const queryString = paramsObject.toString()
        console.log(queryString); // pname=%E6%B9%96%E5%8C%97%E7%9C%81&cname=%E6%AD%A6%E6%B1%89%E5%B8%82

        const xhr = new XMLHttpRequest()
        xhr.open('GET', `http://ajax-api.itheima.net/api/area?${queryString}`)
        // 请求发送完成后触发事件
        xhr.addEventListener('loadend', () => {
            // 对响应结果做后续处理
            console.log(JSON.parse(xhr.response).data);
        })
        // 发送请求
        xhr.send()
    </script>
</body>

</html>